<template>
	<div class="record">
		<div class="record-time">{{ item.createTime }}</div>
		<div class="record-state">
			<div class="state-cotnent">
				<svg-icon class="icon" v-if="item.status == 3 || item.status == 1" iconName="kiting"></svg-icon>
				<svg-icon class="icon" v-if="item.status == 2 || item.status == 4 || item.status == 0" iconName="kiting-gray"></svg-icon>
				<div v-if="item.status == 0">
					提现审核中
				</div>
				<div v-if="item.status == 1">
					审核成功，等待打款
				</div>
				<div v-if="item.status == 2" class="err">
					审核失败
					<div class="msg">
						{{ item.reason }}
					</div>
				</div>
				<div v-if="item.status == 4" class="err">
					<div>
						提现失败
					</div>
					<div class="msg">
						{{ item.reason }}
					</div>
				</div>
				<div v-if="item.status == 3" class="err">
					<div>
						已提现
					</div>
					<div class="msg">交易号：{{ item.tradeNo.substring(15, item.tradeNo.length) }}</div>
				</div>
			</div>
			<div class="price">¥{{ item.amount }}</div>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {};
	},
	props: {
		item: {
			type: Object,
			default: () => {
				return {};
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.record {
	width: 716px;
	height: 180px;
	background: $bg-white;
	border-radius: 16px;
	margin: 0 auto;
	margin-top: 20px;
	padding: 20px 18px 20px 22px;
	@include flexBox(space-between, null, column);
	/* prettier-ignore */
	font-size: 14PX;
	.record-time {
		color: #717076;
	}
	.record-state {
		@include flexBox(space-between, center);
		.state-cotnent {
			@include flexBox(null, center);
			color: $text-black;
			.icon {
				font-size: 56px;
				margin-right: 12px;
			}
			.err {
				@include flexBox(space-between, flex-start, column);
				text-align: left;
				.msg {
					/* prettier-ignore */
					font-size: 12PX;
					color: #717076;
				}
			}
		}
		.price {
			color: $main-color;
			font-size: 32px;
			font-weight: 500;
		}
	}
}
</style>
